<template>
  <div>
    <label class="subtitle">发表文章</label>
    <el-input v-model="article.title" style="margin-top: 15px" placeholder="请输入标题"></el-input>
    <section class="editor" style="min-height: 500px;">
      <!--<el-input placeholder="请输入标题" v-model="input3">-->
      <!--<template slot="prepend">文章标题</template>-->
      <!--</el-input>-->

      <el-select v-model="article.tags" style="margin-top: 15px; width: 300px" multiple placeholder="请选择标签">
        <el-option
          v-for="item in tagoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-select v-model="article.category" style="margin-top: 15px; margin-left: 30px; width:300px" clearable placeholder="请选择分类">
        <el-option
          v-for="item in categoryoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <quill-editor class="quill-editor" ref="myTextEditor" placeholder="请输入内容" style="margin-top: 15px" v-model="article.content" :config="editorOption"></quill-editor>

    </section>
    <el-button type="primary" class="submitBtn" @click="releaseInfo">发布</el-button>
  </div>

</template>
<script>
  import { quillEditor } from 'vue-quill-editor'
  import api from '~/plugins/api'
  export default {
    name:'UE',
    data:function () {
      return {
        article:{
          title:'',
          content:'',
          status:'publish',
          tags:[],
          category:[]
        },
        editorOption:{

        },
        tagoptions: [{
          value: 'First2',
          label: 'First2'
        }, {
          value: 'vue',
          label: 'vue'
        }, {
          value: 'two',
          label: 'two'
        }],
        categoryoptions: [{
          value: 'New',
          label: 'New'
        }],

      }
    },

    methods:{
      saveArticle: api.saveArticle,
      gohome:api.gohome,
      getArticles:api.getArticles,
      getUEContent(){
        return this.editor.getContent()
      },
      releaseInfo(){
        let params = this.article
        params.tags = this.$util.tagsToString(this.article.tags)
        this.saveArticle(params).then(data => {
          if (data.success) {
            debugger;
//          this.open3();
//          this.$router.push('/article')
//          this.$message({
//            message: '发布文章成功!',
//            type: 'success'
//          })
          this.$notify({
            title: '成功',
            message: '文章发布成功',
            type: 'success'
          });
          this.getArticles(0, 100);
        } else {
//          this.$message({
//            message: '发布文章失败,' + data.msg,
//            type: 'error'
//          })
          this.$notify.error({
            title: '错误',
            message: '文章发布失败'
          });
        }
      })
      }
    },
    components:{
      quillEditor
    }
  }
</script>
<style>
  .quill-editor {

    height: 600px;
  }

  .subtitle {
    border-left: 5px solid #496ab4;
    padding-left: 10px;
    font-family: "microsoft yahei", sans-serif;
    font-weight: normal;
    font-size: 20px;
    marging: 10px
  }

  .submitBtn{
    text-align: center;
    margin-top: 60px;
  }
</style>
